<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--begin code mirror -->
<!--下面两个是使用Code Mirror必须引入的-->
<link rel="stylesheet" href="/codemirror/lib/codemirror.css"/>
<script src="/codemirror/lib/codemirror.js"></script>
<!--Java代码高亮必须引入-->
<script src="/codemirror/mode/clike/clike.js"></script>
<!--groovy代码高亮-->
<script src="/codemirror/mode/groovy/groovy.js"></script>
<!--引入css文件，用以支持主题-->
<link rel="stylesheet" href="/codemirror/theme/dracula.css"/>

<!--支持代码折叠-->
<link rel="stylesheet" href="/codemirror/addon/fold/foldgutter.css"/>
<link rel="stylesheet" href="/bootstrap-3.3.4/dist/css/bootstrap.min.css">
<script src="/codemirror/addon/fold/foldcode.js"></script>
<script src="/codemirror/addon/fold/foldgutter.js"></script>
<script src="/codemirror/addon/fold/brace-fold.js"></script>
<script src="/codemirror/addon/fold/comment-fold.js"></script>
<!--括号匹配-->
<script src="/codemirror/addon/edit/matchbrackets.js"></script>

<script src="/codemirror/addon/hint/show-hint.js"></script>
<link rel="stylesheet" href="/codemirror/addon/hint/show-hint.css">

<head>
    <meta charset="utf-8"/>
    <title>代码框</title>
</head>
<style>
    html, body {
        height: 100%;
    }
    #consoleLog {
        background-color: #0f0f0f;
        color: white;
    }
</style>
<body>

<div class="container" style="height: 100%;">
    <div class="row">
        <button id="test" class="btn btn-success">运行代码</button>
    </div>
    <div class="row" style="height: 100%">
        <div class="col-sm-10 col-lg-10" style="height: 100%"><textarea  id="code" name="code"></textarea></div>

        <pre id="consoleLog" style="display:block; height: 100%" class="col-sm-2 col-lg-2"></pre>
    </div>
    </div>


</div>




<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/js/common.js"></script>
<script>


      var code = "public class Test {\n" +
      "\n" +
      "    public static void main(String[] args) {\n" +
      "        System.out.println(\"hello world\");\n" +
      "    }\n" +
      "}";

      var initValue = code;


    //根据DOM元素的id构造出一个编辑器
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        // mode: "text/groovy",    //实现groovy代码高亮
        mode: "text/x-java", //实现Java代码高亮
        lineNumbers: true,	//显示行号
        indentUnit: 4,
        theme: "dracula",	//设置主题
        lineWrapping: true,	//代码折叠
        foldGutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
        matchBrackets: true,	//括号匹配
        //readOnly: true,        //只读
        extraKeys: {'Alt-/': 'autocomplete'},//自定义快捷键
    });
    editor.setSize('100%', '100%');     //设置代码框的长宽

     // 设置初始文本，这个选项也可以在fromTextArea中配置
    editor.setOption("value", initValue);
   // 编辑器按键监听
   // editor.on("cursorActivity", function() {
   //     // 显示智能提示
   //     console.log("fukc")
   //     editor.showHint(); // 注意，注释了CodeMirror库中show-hint.js第131行的代码（阻止了代码补全，同时提供智能提示）
   // });

   // editor.setValue("");    //先代码框的值清空
   // editor.setValue(obj.scriptCode);    //给代码框赋值

    // editor.setOption("readOnly", true);


    var test = document.getElementById("test");
  test.onclick = function() {
      var value = editor.getValue();
      console.log(value);
      var data = {
          'javaSource': value
      }
      $.operate.jsonPost("/front/compile", data, function (res) {
          console.log("res:" + JSON.stringify(res))
          // $("#consoleLog").val('')
          if (res.resultTypeEnum == 200) {
              var totalTime = "\r\n运行总耗时：" + res.excuteDurationTime + "ms"
              $("#consoleLog").text(res.excuteResult + totalTime)
          } else {
              $("#consoleLog").text("运行出错")
          }


      })
  }

</script>
</body>
</html>